import { useState, memo } from 'react';
import { Gauge as AntGauge } from '@ant-design/plots';
import { isEqual } from 'lodash';

const DemoGauge = memo(
  ({ data, config, onReady }) => {
    // 添加更多防御性编程，确保percent是有效的数字
    let safePercent = 0.6; // 默认值
    try {
      // 确保data和percent存在且是有效的数字
      if (data && typeof data.percent === 'number' && !isNaN(data.percent)) {
        // 确保percent在0-1之间
        safePercent = Math.min(Math.max(data.percent, 0), 1);
      }
    } catch (e) {
      console.error('Gauge chart percent calculation error:', e);
    }

    const chartConfig = {
      percent: safePercent,
      // 简化配置，避免复杂设置导致的问题
      range: {
        color: ['#3ba272', '#ffc658', '#f56c6c'],
      },
      // 简化指示器配置
      indicator: {
        pointer: {
          style: {
            stroke: '#D0D0D0',
          },
        },
      },
      // 使用非常简单的details配置，避免自定义formatter
      details: {
        // 不使用自定义formatter，使用默认的
        style: {
          fill: '#636363',
          fontSize: '20px',
        },
      },
      // 添加高度设置确保图表有足够空间
      height: 250,
      // 只合并简单的配置，避免覆盖关键设置
      ...(config || {}),
      onReady,
    };
    
    // 移除可能导致问题的复杂配置
    delete chartConfig.details?.formatter;
    
    return <AntGauge {...chartConfig} />;
  },
  (pre, next) => {
    try {
      return isEqual(pre?.data, next?.data) && isEqual(pre?.config, next?.config);
    } catch (e) {
      return false;
    }
  },
);

const GaugeChart = ({ data = null, config = {}, onReady = () => {} }) => {
  // 使用更简单的默认数据
  const defaultData = { percent: 0.85 };

  return <DemoGauge data={data || defaultData} config={config} onReady={onReady} />;
};

export default GaugeChart;